<template>
  <div>
    <el-dialog title="编辑用户" :visible.sync="editDialogVisible" width="50%">
      <!-- 内容主体区域 -->
      <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="110px">
        <el-form-item label="角色名" prop="roleName">
          <el-input v-model="editForm.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input type="textarea" v-model="editForm.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm">重置</el-button>
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editRole">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { roleListApi, editRoleApi } from '@/api/role'
export default {
  data() {
    // 角色名的唯一性验证
    const checkRoleName = (rule, value, callback) => {
      // 修改后的角色名称：可以和当前要修改的数据的名称一致，但是不能和表中的其他数据一样
      const role = this.roleList.find(item => item.id !== this.editForm.id && item.roleName === value)
      if (role && role.roleName) {
        return callback(new Error('角色名称重复'))
      }
      callback()
    }
    return {
      // 所有的角色数据
      roleList: [],
      editDialogVisible: false,
      // 表单数据
      editForm: {},
      // 验证表单
      editFormRules: {
        roleName: [{
          required: true, message: '请输入角色名', trigger: 'blur'
        }, {
          validator: checkRoleName, trigger: 'blur'
        }],
        roleDesc: [{
          required: true, message: '请输入角色描述', trigger: 'blur'
        }, {
          min: 3, max: 20, trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    // 获取角色列表
    async getRoleList() {
      const res = await roleListApi()
      if (res.meta.status !== 200) {
        return this.$message.error('获取角色列表失败')
      }
      this.roleList = res.data
    },
    // 打开对话框
    open(role) {
      console.log(role)
      // this.editForm = role 这种写法是错误，是一个浅拷贝
      // 可以通过以下几种方式实现深拷贝
      /*  this.editForm.id = role.id
       this.editForm.roleName = role.roleName
       this.editForm.roleDesc = role.roleDesc */
      /* for (const key in role) {
        this.editForm[key] = role[key]
      } */
      const roleStr = JSON.stringify(role)
      this.editForm = JSON.parse(roleStr)

      this.editDialogVisible = true
      // 获取角色列表数据
      this.getRoleList()
    },
    // 重置表单
    resetForm() {
      this.$refs.editFormRef.resetFields()
    },
    // 添加角色
    editRole() {
      this.$refs.editFormRef.validate(async valid => {
        if (!valid) {
          return this.$message.error('数据验证失败!')
        }
        //  修改
        const res = await editRoleApi(this.editForm)
        if (res.meta.status !== 200) {
          return this.$message.error('修改角色失败!')
        }
        this.$message.success('修改角色成功')
        this.$emit('on-edit-role', res.data)
        console.log(res.data)
        this.editDialogVisible = false
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>